<template>
	<el-form size="large" class="login-content-form">
		<el-form-item class="login-animation1">
			<el-input text placeholder="请输入账号" v-model="state.ruleForm.phone" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-User /></el-icon>
				</template>
			</el-input>
		</el-form-item>

		<el-form-item class="login-animation1">
			<el-input text class="code_input" placeholder="请输入密码" v-model="state.ruleForm.captcha" clearable>
				<!-- <template #append>
					<view @click="doSendCode">
						<text v-if="!isSendCode" class="sendcode">发送验证码</text>
						<text v-if="isSendCode">{{ sendCodeMins }}s后重新获取</text>
					</view>
				</template> -->
			</el-input>

			<!-- <el-button class="code_button" @click="doSendCode">
				<text v-if="!isSendCode" class="sendcode">发送验证码</text>
				<text v-if="isSendCode">{{ sendCodeMins }}s后重新获取</text>
			</el-button> -->
		</el-form-item>

		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn"
				:loading="state.loading.signIn">
				<span>{{ $t('message.account.accountBtnText') }}</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts" name="loginAccount">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session, Local } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { getCommonSms, doLogin } from '/@/api/login';
import { isMobileByWidth } from '/@/utils/Utils';

const isSendCode = ref(false);
const sendCodeMins = ref(60);
var random = 0;

// 发送短信验证码
async function doSendCode() {
	if (state.ruleForm.phone.length < 11) {
		ElMessage({
			message: '请输入11位手机号',
			type: 'error',
		});
		return;
	}

	if (isSendCode.value) {
		return;
	}
	try {
		let { data, code } = await getCommonSms({
			...state.ruleForm,
			randomCode: random,
			loginType: 1,
		});

		if (code == 200) {
			isSendCode.value = true;

			setInterval(
				() => {
					if (sendCodeMins.value > 0) {
						sendCodeMins.value--;
					} else {
						isSendCode.value = false;
					}
				},
				1000,
				0
			);
		} else {
			// getVerificationCodeFn();
		}
	} catch (e) {
		// getVerificationCodeFn();
	}
}

// 定义变量内容
const { t } = useI18n();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const state = reactive({
	isShowPassword: false,
	verCodeImge: '',
	ruleForm: {
		userName: '',
		password: '',
		code: '',
	},
	loading: {
		signIn: false,
	},
});

onMounted(() => { });

// 时间获取
const currentTime = computed(() => {
	return formatAxis(new Date());
});
// 登录
const onSignIn = async () => {
	if (!state.ruleForm.phone) {
		ElMessage({
			message: '请输入账号',
			type: 'error',
		});
		return;
	}

	if (state.ruleForm.phone.length < 11) {
		ElMessage({
			message: '请输入11位手机号',
			type: 'error',
		});
		return;
	}

	if (!state.ruleForm.captcha) {
		ElMessage({
			message: '请输入验证码',
			type: 'error',
		});
		return;
	}

	let { code, data } = await doLogin({
		...state.ruleForm,
	});

	if (code == 200) {
		state.loading.signIn = true;
		// 存储 token 到浏览器缓存
		Session.set('token', data.token);
		Session.set('userInfoLocal', data);

		Local.set('token', data.token);
		Local.set('userInfoLocal', data);

		// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
		Cookies.set('userName', state.ruleForm.userName);
		if (!themeConfig.value.isRequestRoutes) {
			// 前端控制路由，2、请注意执行顺序
			const isNoPower = await initFrontEndControlRoutes();
			signInSuccess(isNoPower);
		} else {
			// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
			// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
			const isNoPower = await initBackEndControlRoutes();
			// 执行完 initBackEndControlRoutes，再执行 signInSuccess
			signInSuccess(isNoPower);
		}
	}
};
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
	if (isNoPower) {
		ElMessage.warning('抱歉，您没有登录权限');
		Session.clear();
	} else {
		// 初始化登录成功时间问候语
		let currentTimeInfo = currentTime.value;
		// 登录成功，跳到转首页
		// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中

		router.push('/index');

		// if (isMobileByWidth() && Session.get('userInfoLocal').userType == '01') {
		// 	console.log('🚀 ~ signInSuccess ~ router:', route);

		// 	// 移动端逻辑
		// 	router.push('/richeditMobile');
		// } else {
		// 	// PC端逻辑
		// 	if (route.query?.redirect && route.query?.redirect != '/richeditMobile') {
		// 		router.push({
		// 			path: <string>route.query?.redirect,
		// 			query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
		// 		});
		// 	} else {
		// 		router.push('/richedit');
		// 	}
		// }

		// 登录成功提示
		const signInText = t('message.signInText');
		ElMessage.success(`${currentTimeInfo}，${signInText}`);
		// 添加 loading，防止第一次进入界面时出现短暂空白
		NextLoading.start();
	}
	state.loading.signIn = false;
};
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;

	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;

		&:hover {
			color: #909399;
		}
	}

	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
		background-color: #f2505d;
		border-radius: 5px;
		border: 0;
	}
}

.send_code {
	display: flex;

	.code_input {
		width: 70%;
	}

	.code_button {
		cursor: pointer;
		margin-left: 10px;
	}
}

:deep(.el-form-item__content) {
	flex-wrap: nowrap;
}
</style>
